[00:00] In this lesson we'll look at using the time series chart component in a report. On the screen you can see I'm currently within the design tab of the report designer interface for my report. To add a time series chart to my report, I can simply drag it from the component palette under the graphs and charts section. This chart looks similar in comparison to an XY chart, however we can clearly see it's using a date time value for its domain axis, whereas an XY chart would use a numerical value for this axis. Because of this, representing tag history data is a perfect use case for the timeseries chart and we'll see why in just a moment. Now, to represent any meaningful data we need to provide a data key, which you'll see with the chart selected we have an available data key property in the property inspector. If we check the data tab, we'll see I have a tag history query already for our chart to use. So let's go back to the design tab and select our chart. I'll go ahead and expand my data sources folder within the key browser to find my tag history query.

[01:10] Then I'll drag and drop tag history to the data key. Next, we need to specify a domain key. When the time series chart is created the domain key is by default set to this t_stamp value, but you can set it to any sort of timestamp or time value column you'd like. Now since we're using a tag history query, if we drill down our tag history data source, you can see that t_stamps already a column being returned. So the domain key is already set. This is why the timeseries chart is great for representing tag history. The bare minimum last thing we need to do to show some tag history on the chart is to add our pens. Now there are two pens by default, but these are just placeholders. They don't really have any data associated with them, so I'm going to click on one of them and then click the remove icon a couple of times to remove both pens. When adding pens, there are two ways to do so.

[02:04] First, you can click on the add icon and it will create a new pen for us. I will need to update my range key to represent the correct data. So I'll start by dragging in random double to this column. I'll go ahead and rename this pen to random double as well. Alternatively, we could just drag and drop our keys from our data source. I'll do so for both random integer and random long, and that's all we really need to do to show tag history. Let's see how the report is looking in the preview tab. You can see I already have some value showing up. The chart is showing I started getting values at around 3:00 AM today. Those values remained fairly static until about 10:30 AM this morning. Let's look at some of the properties that are available on the time series chart. To do so we'll go back to the design tab. I'll click on the chart and let's start with our pens here. To edit any of the pens we can first select one and then click on the edit icon. I'll do so for the random double pen. We can change some general options like the data key, the pen name, and the axis.

[03:06] This is referring to the range axis, not the domain axis. There's also a number of options to alter the pen's style. You can change the color. Let's pick a green color for the pen. The style option alters the pen's form. Depending on which option is selected here, determines the availability of some of these additional options below. So while my style is set to a line, I'm able to adjust its weight. If I change the style to a shape, I can change which shape is represented. When I change the style to bar, you can see our values are represented like a bar graph would be, and we can also apply labels over the bars. I'll go ahead and turn these off for now. So there's quite a lot of ways that you can represent these values visually. When you're done configuring those options, you can always click this back arrow to return to our pens. And if we scroll down, we can take a look at the properties for the axes. So we'll click on the default axis and click on the edit icon.

[04:03] You can change the name, label, the type and the position. For position we can set it to the left, right, or even to hidden. I'll leave it set to the right. If you scroll down here, you can disable auto range, and when you do, you can specify your lower and upper bound values. You can also specify if you want manual tick units. Clicking the back button will show that our axis has been updated, and of course we can add multiple of them where we can then give them new names and make them auto range or not directly from here. Now the last area of properties that you want to pay attention to is in this properties tab at the top here. Now these are properties specific to the chart, so we can change our data or domain key from here. And you see there's not that many properties. We very quickly go down our basic properties, but there is one important one, which is this date format. Now normally the format on a domain axis is dependent on the date range shown on the chart. So if we take a look at the preview tab, you can see I'm only seeing the hours for today.

[05:05] If we go back to the design tab here and we select our chart one more time and head back to our properties, we can override this date format. So when there's no value in here, it'll automatically detect it. But if we put in say the year, month, and our day and hit enter, we'll see our domain range change. In conclusion, if you're trying to represent tag history, data or data with the time based domain axis, then the timeseries chart is perfect in this use case.